<template>
  <el-dialog v-model="visible" title="疫情填报">
    <el-form
      :model="healthForm"
      label-width="auto"
      :rules="rules"
      status-icon
      ref="formRef"
    >
      <el-form-item label="位置">
        <el-input v-model="healthForm.address" disabled />
      </el-form-item>
      <el-form-item label="体温" prop="temperature">
        <el-input v-model="healthForm.temperature" />
      </el-form-item>
      <el-form-item label="核酸报告">
        <el-select v-model="healthForm.status" placeholder="请选择当前状态">
          <el-option label="阴性" :value="0" />
          <el-option label="阳性" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否咳嗽">
        <el-select v-model="healthForm.isCough" placeholder="请选择当前状态">
          <el-option label="不咳嗽" :value="0" />
          <el-option label="咳嗽" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm(formRef)">
          确认
        </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { addHealth } from '@/api/modules/health'
import type { FormInstance, FormRules } from 'element-plus'

// ------------------------------ 父子通信 ------------------------------
// 对话框显示
const visible = ref(false)
const props = defineProps(['address'])
const handleDialogVisible = () => {
  visible.value = true
}
defineExpose({ handleDialogVisible })

// ------------------------------ 表单 ------------------------------
// 表单实例
const formRef = ref<FormInstance>()
// 疫情填报表单
const healthForm = reactive<IHealthForm>({
  status: 0,
  isCough: 0,
  temperature: '',
  address: props.address,
})
// 校验规则
const rules = reactive<FormRules>({
  status: { required: true, message: '请填写核酸报告' },
  temperature: { required: true, message: '请填写体温' },
})

// ------------------------------ 对话框 ------------------------------
// 对话框确定
const handleConfirm = async (formRef: FormInstance | undefined) => {
  if (!formRef) return
  await formRef.validate((valid, fields) => {
    if (valid) {
      visible.value = false
      addHealth(healthForm)
        .then((response) => {
          console.log(response)
        })
        .catch((error) => {
          console.log(error)
        })
    } else {
      console.log('校验未通过', fields)
    }
  })
}
</script>

<style scoped></style>
